import React from 'react';
import { withRouter } from 'react-router';
import config from '../../assets/js/conf/config';
import { getWeatherDetails }  from '../../assets/js/utils/index';
import './index.css';

class FootComponent extends React.Component{

    //页面跳转
    goPage(url){
        this.props.history.push(config.path+url);
    }

    render(){
        const { isShow, showTable, weather, isLive } = this.props;
        return (
            <div className={isShow ? 'footer move' : 'footer unmove'}>
                <div className='weather'>
                    <div className='days'>
                        <div className='text'>{isLive ? '今天' : '明天'}</div>
                        <div className='clock' onClick={() => showTable()}>
                            <img src={isLive ? require('../../assets/images/home/index/tq-clock.png') : require('../../assets/images/home/predict/predict.png') } alt="loading" />
                        </div>
                    </div>
                    <div className='temp'>27/21<span>℃</span></div>
                    <div className='rainfall'>
                        <div className='img'>
                            <img src={require('../../assets/images/home/index/weather-r.png')} alt="loading" />
                        </div>
                        <div className='text'>2.5mm</div>
                    </div>
                    <div className='sky'>
                        <div className='img'>
                            <img src={require('../../assets/images/home/weather/thunder.svg')} alt="loading" />
                        </div>
                        <div className='text'>{getWeatherDetails(weather).text}</div>
                    </div>
                </div>
                {/* 阵雨转阴 */}
                {
                    isLive && weather === '1' && <div className='word'>
                        <div className='word-img'>
                            <img src={require('../../assets/images/home/index/word.png')} alt="loading" />
                        </div>
                        <div className='info' onClick={() => this.goPage('home/report')}>
                            <div className='title'>气象信息快报2002年 第3期</div>
                            <div className='date'>2020-08-01</div>
                        </div>
                    </div>
                }
                {/* 晴将有降雨 */}
                {
                    isLive && weather === '2' && <div>晴将有降雨</div>
                }
                {/* 晴转阴 */}
                {
                    isLive && weather === '3' &&  <div className='quotas'>
                        <div className='quota-item'>
                            <div className='img'>
                                <img src={require('../../assets/images/home/predict/pressure.png')} alt="loading" />
                            </div>
                            <div className='value'>9.32 pa</div>
                            <div className='text'>气压</div>
                        </div>
                        <div className='quota-item'>
                            <div className='img'>
                                <img src={require('../../assets/images/home/predict/see.png')} alt="loading" />
                            </div>
                            <div className='value'>1.2 km</div>
                            <div className='text'>能见度</div>
                        </div>
                        <div className='quota-item'>
                            <div className='img'>
                                <img src={require('../../assets/images/home/predict/humidity.png')} alt="loading" />
                            </div>
                            <div className='value'>12 %</div>
                            <div className='text'>湿度</div>
                        </div>
                        <div className='quota-item'>
                            <div className='img'>
                                <img src={require('../../assets/images/home/predict/lights.png')} alt="loading" />
                            </div>
                            <div className='value'>12m</div>
                            <div className='text'>紫外线</div>
                        </div>
                    </div>
                }
                {/* 预报echart折线图 */}
                {
                    !isLive && <div className='word line-chart'>
                        <div className='img'>
                            <img src={require('../../assets/images/home/predict/echart-p.png')} alt="loading" />
                        </div>
                    </div>
                }
            </div>
        )
    }
}

export default withRouter(FootComponent);